<template>
  <header
    class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
  >
    <a
      href="/"
      class="
        d-flex
        align-items-center
        mb-3 mb-md-0
        me-md-auto
        text-dark text-decoration-none
      "
    >
      <svg class="bi me-2" width="40" height="32">
        <use xlink:href="#bootstrap"></use>
      </svg>
      <span class="fs-4">Site</span>
    </a>
    <ul class="nav nav-pills">
      <li class="nav-item">
        <router-link to="/" class="nav-link active" aria-current="page"
          >Home</router-link
        >
      </li>
      <li class="nav-item">
        <router-link to="/about" class="nav-link">About</router-link>
      </li>
      <li class="nav-item dropdown text-end">
        <a
          href="#"
          class="
            d-block
            link-dark
            text-decoration-none
            dropdown-toggle
            nav-link
          "
          id="dropdownUser1"
          data-bs-toggle="dropdown"
          aria-expanded="false"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            fill="currentColor"
            class="bi bi-person-fill rounded-circle"
            viewBox="0 0 16 16"
          >
            <path
              d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"
            />
          </svg>
        </a>
        <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
          <li><a class="dropdown-item" href="#">#1</a></li>
          <li><a class="dropdown-item" href="#">#2</a></li>
          <li><a class="dropdown-item" href="#">#3</a></li>
          <li><hr class="dropdown-divider" /></li>
          <li><a class="dropdown-item" href="#">#4</a></li>
        </ul>
      </li>
    </ul>
  </header>
  <main id="main">
    <router-view />
  </main>
  <footer class="footer mt-auto py-3 bg-light">
  <div class="container">
    <span class="text-muted">Powered By Tusdasa</span>
  </div>
</footer>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#main {
  margin-top: 60px;
}
</style>
